document.addEventListener('DOMContentLoaded', function () {
    // 数据渲染函数
    function renderData() {
        // 伤寒论部分
        const shangHanChapterListHtml = template('chapterListTP', { titles: shangHanTiaoWenData });
        const shangHanTiaoWenHtml = template('tiaoWenTP', { tiaoWens: shangHanTiaoWenData });

        // 金匮要略部分
        const jinGuiChapterListHtml = template('chapterListTP', { titles: jinGuiTiaoWenData });
        const jinGuiTiaoWenHtml = template('tiaoWenTP', { tiaoWens: jinGuiTiaoWenData });

        // DOM操作
        $('#shangHanChapterList').html(shangHanChapterListHtml);
        $('#shangHanTiaoWenBox').html(shangHanTiaoWenHtml);
        $('#jinGuiChapterList').html(jinGuiChapterListHtml);
        $('#jinGuiTiaoWenBox').html(jinGuiTiaoWenHtml);
    }

    // 显示指定section
    function showSection(sectionId) {
        $('main section').removeClass('displayBlock');
        $(sectionId).addClass('displayBlock');

    }

    // 初始化导航状态
    function initNav() {
        const lastMenu = localStorage.getItem('lastMenu') || '#shangHan';
        // 修改选择器排除搜索按钮
        $('header nav a').not('[href="#search"]').removeClass('active');
        $(`a[href="${lastMenu}"]:not([href="#search"])`).addClass('active'); // 新增排除条件
        showSection(lastMenu);
    }

    // 恢复左侧目录状态
    function restoreLeftMenu() {
        const currentSection = $('section.displayBlock').attr('id');
        const lastLiId = localStorage.getItem(`lastLi_${currentSection}`) || '';
        const $container = $(`.left-container[section-id="${currentSection}"]`);

        $container.find('li').removeClass('active');
        if (lastLiId) {
            const $activeLi = $container.find(`[data-target="${lastLiId}"]`).addClass('active');
            // 修正滚动容器获取方式
            const ul = $activeLi.closest('ul')[0]; // 改为从激活项向上查找ul
            const li = $activeLi[0];
            if (li && ul) {
                const containerHeight = ul.clientHeight;
                const liOffset = li.offsetTop;
                const liHeight = li.clientHeight;

                const scrollTop = liOffset - (containerHeight / 2) + (liHeight / 2);
                ul.scrollTo({
                    top: scrollTop,
                    behavior: 'smooth'
                });
            }
        } else {
            $container.find('li:first').addClass('active');
        }
    }

    // 导航点击事件
    $('header nav a').not('.search-container a').on('click', function (e) { // 修改选择器排除搜索容器
        e.preventDefault();
        const target = $(this).attr('href');
        const currentSection = $('section.displayBlock').attr('id');

        // 保存当前section的目录状态
        const currentActiveLi = $(`.left-container[section-id="${currentSection}"] li.active`).data('target');
        if (currentActiveLi) {
            localStorage.setItem(`lastLi_${currentSection}`, currentActiveLi);
        }

        // 移除其他导航active状态和input边框
        $('header nav a').not('.search-container a').removeClass('active'); // 修改排除条件
        $('header nav input').removeClass('active-border'); // 保留这行移除边框

        // 更新当前导航状态
        $(this).addClass('active');

        // 显示对应内容
        showSection(target);
        // 如果屏幕不大于768px
        if (window.innerWidth <= 768) {
            // 成功显示对应内容后，移除 container header-container 上的open类
            $('.header-container').removeClass('open');
        }

        // 保存状态
        localStorage.setItem('lastMenu', target);


        // 恢复新section对应的左侧目录后增加滚动
        restoreLeftMenu();
        scrollToSavedPosition();
    });

    // 搜索框处理
    $('#searchInp')
        .on('focus', function () {
            // 移除其他导航active状态
            $('header nav a').not('.search-container a').removeClass('active'); // 精确排除搜索容器
            $(this).addClass('active-border');
            // 并且给父元素添加active类名
            $(this).parent().addClass('active');
            showSection('#search');
        });
    //小屏时,点击折叠按钮
    $('.burger').on('click', function () {
        $('header .header-container').toggleClass('open');
    });

    // 左侧目录点击事件（伤寒/金匮专用）
    $(document).on('click', '.left-container li', function () {
        const $li = $(this);
        // console.log($li)
        const targetId = $li.data('target');
        const sectionId = $li.closest('.left-container').attr('section-id');

        // 保持原有激活状态逻辑
        $li.siblings().removeClass('active');
        $li.addClass('active');

        // 优化滚动逻辑
        const targetElement = document.getElementById(targetId);
        if (targetElement) {
            const $scrollContainer = $(targetElement).closest('.right-container').find('.tiaoWen');

            //使用原生scrollIntoView确保兼容性（由于在edge 浏览器不支持，所以jq的滚动）
            // targetElement.scrollIntoView({
            //     behavior: 'smooth',
            //     block: 'start'
            // });
            // 计算目标位置（考虑容器padding和元素尺寸）
            const offsetTop = targetElement.offsetTop - $scrollContainer[0].offsetTop - 10;

            // 使用jQuery动画滚动
            $scrollContainer.animate({
                scrollTop: offsetTop
            }, 200); // 200ms动画时长
            // 添加高亮动画
            $(targetElement).addClass('highlight-temp');
            setTimeout(() => $(targetElement).removeClass('highlight-temp'), 5000);
        }

        localStorage.setItem(`lastLi_${sectionId}`, targetId);
        //判断如果屏幕不大于768px，点击后移除它上面第三级的 active  样式，并重置 .display-hide-left-container的样式
        if (window.innerWidth <= 768) {
            //找到上面第三层的元素，移除active
            $(this).parent().parent().removeClass('active')
            $('.display-hide-left-container-box').removeClass('active')
            $('.display-hide-left-container .fa-angle-left').addClass('display')
            $('.display-hide-left-container .fa-angle-right').removeClass('display')
        }
    });

    // 新增搜索页目录点击事件
    $(document).on('click', '.search-left-container li', function () {
        const $li = $(this);
        const targetId = $li.data('target');
        const sectionId = $li.closest('.search-left-container').attr('section-id');

        $li.siblings().removeClass('active');
        $li.addClass('active');

        const targetElement = document.getElementById(targetId);
        if (targetElement) {
            // 使用jQuery平滑滚动替代方案
            const $scrollContainer = $(targetElement).closest('.search-right-container').find('.search-tiaowen');

            // 计算目标位置（考虑容器padding和元素尺寸）
            const offsetTop = targetElement.offsetTop - $scrollContainer[0].offsetTop - 10;

            // 使用jQuery动画滚动
            $scrollContainer.animate({
                scrollTop: offsetTop
            }, 200); // 200ms动画时长

            $(targetElement).addClass('highlight-temp');
            setTimeout(() => $(targetElement).removeClass('highlight-temp'), 5000);
        }
        localStorage.setItem(`lastLi_${sectionId}`, targetId);
        if (window.innerWidth <= 768) {
            //找到上面第三层的元素，移除active
            $(this).parent().parent().removeClass('active')
            $('.display-hide-left-container-box').removeClass('active')
            $('.display-hide-left-container .fa-angle-left').addClass('display')
            $('.display-hide-left-container .fa-angle-right').removeClass('display')

        }

    });

    // 滚动联动处理
    function initScrollSync() {
        $('.right-container .tiaoWen').on('scroll', function () {
            const $container = $(this);
            const sectionId = $container.closest('.right-container')
                .siblings('.left-container').attr('section-id');

            const scrollTop = $container.scrollTop();
            const windowHeight = $container.height();
            const threshold = windowHeight / 2;

            let activeId = '';

            $container.find('.tiaoWen-section').each(function () {
                const $section = $(this);
                const sectionTop = $section.position().top;
                const sectionHeight = $section.outerHeight();

                if (sectionTop <= threshold &&
                    (sectionTop + sectionHeight) >= threshold) {
                    activeId = $section.attr('id');
                    return false; // 退出循环
                }
            });

            if (activeId) {
                const $activeLi = $(`.left-container[section-id="${sectionId}"] li`)
                    .removeClass('active')
                    .filter(`[data-target="${activeId}"]`)
                    .addClass('active');

                // 新增保持激活项在视口中的逻辑
                const ul = $activeLi.closest('ul')[0];
                const li = $activeLi[0];
                if (li && ul) {
                    const containerHeight = ul.clientHeight;
                    const liOffset = li.offsetTop;
                    const liHeight = li.clientHeight;

                    const scrollTop = liOffset - (containerHeight / 2) + (liHeight / 2);
                    ul.scrollTo({
                        top: scrollTop,
                        behavior: 'smooth'
                    });
                }
            }
        });
    }

    // 新增搜索相关功能
    let searchTimer = null;

    // 高亮关键字函数
    function highlightKeywords(text, keyword) {
        const regex = new RegExp(`(${keyword})`, 'gi');
        return text.replace(regex, '<span class="highlight">$1</span>');
    }

    // 搜索函数
    function performSearch(keyword) {
        const allData = [...shangHanTiaoWenData, ...jinGuiTiaoWenData];
        const results = [];
        // 新增字母检测逻辑
        const hasLetters = /[a-zA-Z]/.test(keyword);
        // 新增数字检测逻辑
        const isNumberOnly = /^\d+$/.test(keyword);

        if (hasLetters) {
            $('#search').html('<div class="no-results"><i class="fas fa-search"></i>未搜到相关内容</div>');
            return;
        }

        if (isNumberOnly) { // 新增数字过滤逻辑
            const targetNumber = parseInt(keyword);
            allData.forEach(section => {
                const matchedItems = section.content.filter(item =>
                    item.number === targetNumber
                );
                if (matchedItems.length > 0) {
                    results.push({
                        ...section,
                        content: matchedItems
                    });
                }
            });
        } else if (keyword === '') {
            $('#search').html('<div class="no-results"><i class="fas fa-search"></i>输入方剂名或关键字进行搜索!</div>');
            return;
        } else {
            // 原有文本搜索逻辑
            allData.forEach(section => {
                const matchedItems = section.content.filter(item =>
                    item.text.includes(keyword)
                );
                if (matchedItems.length > 0) {
                    results.push({
                        ...section,
                        content: matchedItems.map(item => ({
                            ...item,
                            text: highlightKeywords(item.text, keyword)
                        }))
                    });
                }
            });
        }

        // console.log(results)
        //  判断是否有结果
        if (results.length === 0) {
            $('#search').html('<div class="no-results"><i class="fas fa-search"></i>未搜到相关内容</div>');
        } else {
            $('#search').html(
                `<div class=" search-tiaowen-box">               
               
                 <!-- 右侧搜索结果 -->
                <div class="search-right-container">
                    <div class="search-tiaowen" id="searchResults">暂无。。。。。</div>
                </div>
                 <!-- 左侧章节列表 -->
                <div class="search-left-container" section-id="search">
                    <ul id="searchChapterList"></ul>
                </div>            
                </div>`);
            // 渲染搜索结果
            const chapterHtml = template('searchChapterListTP', { titles: results });
            const contentHtml = template('searchTiaoWenTP', { tiaoWens: results });

            $('#searchChapterList').html(chapterHtml);
            $('#searchResults').html(contentHtml);

            // 新增：默认选中第一个章节
            if (results.length > 0) {
                const firstChapter = `search_${results[0].key}`;
                $(`[data-target="${firstChapter}"]`).addClass('active');
            }
            //初始化一下,搜索页面滚动联动
            setInterval(() => {
                initSearchScrollSync()
            }, 1000);
        }
    }
    // 新增：搜索页面滚动联动
    function initSearchScrollSync() {
        // 使用事件委托绑定滚动容器
        $('.search-right-container .search-tiaowen').on('scroll', function () {
            // console.log(1)
            const $container = $(this);
            const scrollTop = $container.scrollTop();
            const windowHeight = $container.height();
            const threshold = windowHeight / 5;

            let activeId = '';

            $container.find('.tiaoWen-section').each(function () {
                const $section = $(this);
                const sectionTop = $section.position().top;
                if (sectionTop <= threshold && (sectionTop + $section.outerHeight()) > threshold) {
                    activeId = $section.attr('id');
                    return false;
                }
            });
            if (activeId) {
                $(`#searchChapterList li`).removeClass('active')
                    .filter(`[data-target="${activeId}"]`).addClass('active');
            }
        });
    }

    // 修改：搜索结果点击处理（添加事件对象参数并阻止冒泡）
    $(document).on('click', '#searchResults .returnOriginalPlace', function (event) {
        event.stopPropagation();  // 新增：阻止事件冒泡
        const originId = $(this).data('id'); // 改用data-id属性
        const [sectionKey, itemNumber] = originId.split('-');
        // 切换到目标章节
        const targetSection = sectionKey.includes('Chapter') ?
            sectionKey.replace(/Chapter\d+$/, '') : 'jinGui';
        $(`a[href="#${targetSection}"]`).click();

        // 使用requestAnimationFrame确保DOM加载
        requestAnimationFrame(() => {
            const targetElement = $(`#${originId}`);
            if (targetElement.length) {
                // 精确滚动定位
                const container = targetElement.closest('.right-container').find('.tiaoWen')[0];
                // 获取目标元素的位置
                const elementTop = targetElement.position().top;
                const containerHeight = container.clientHeight;
                const containerScrollTop = container.scrollTop;

                // 计算目标元素相对于视口中间的位置
                const targetScrollTop = elementTop + containerScrollTop;
                const viewportMiddle = containerScrollTop + (containerHeight / 2);
                const distanceToMiddle = targetScrollTop - viewportMiddle;

                // 计算最终的滚动位置
                const finalScrollTop = containerScrollTop + distanceToMiddle;

                setTimeout(() => {
                    container.scrollTo({
                        top: finalScrollTop,
                        behavior: 'smooth'
                    });
                }, 100);
                // 高亮动画
                targetElement.addClass('highlight-temp');
                setTimeout(() => targetElement.removeClass('highlight-temp'), 5000);
            }
        });
    });

    // 方剂点击事件处理
    $(document).on('click', '.fanJi', function (event) {
        event.stopPropagation();  // 新增阻止冒泡
        const fangJiId = $(this).data('id');
        const fangJiData = fangJiDate[fangJiId];

        if (fangJiData) {
            // 渲染模板
            const html = template('fangJiTP', fangJiData);
            $('body').append(html);

            // 显示弹窗
            $('#fangJi-popup').fadeIn();
        }
    });
    // 新增条文点击事件处理
    $(document).on('click', '.tiaoWen-content-item', function (event) {
        event.stopPropagation();  // 新增阻止冒泡
        const sectionId = $(this).attr('id');
        const jieShiData = tiaoWenJieShiData[`${sectionId}`];

        if (jieShiData) {
            // 渲染模板
            const html = template('tiaoWenJieShiTP', jieShiData);
            $('body').append(html);
            $('#tiaoWenJieShi-popup').fadeIn();
        } else {
            // 新增轻量提示
            const $toast = $(`
                <div class="toast">
                    <i class="fas fa-info-circle"></i>
                    <span>该条文的详细解释正在整理中，敬请期待！</span>
                </div>
            `);
            $('body').append($toast);
            setTimeout(() => $toast.remove(), 2300);
        }
    });
    // 关闭方剂弹窗功能
    $(document).on('click', function (e) {
        // 点击关闭按钮
        if ($(e.target).hasClass('fanJiClose')) {

            $('#fangJi-popup').remove();
        }
        // 点击遮罩层
        if (e.target.id === 'fangJi-popup') {
            $('#fangJi-popup').remove();
        }
    });
    // 关闭条文弹窗功能
    $(document).on('click', function (e) {
        // 点击关闭按钮
        if ($(e.target).hasClass('tiaoWenClose')) {

            $('#tiaoWenJieShi-popup').remove();
        }
        // 点击遮罩层
        if (e.target.id === 'tiaoWenJieShi-popup') {
            $('#tiaoWenJieShi-popup').remove();
        }
    });
    // 医案页,初始化isotop
    // 初始化isotope
    const isotope = new Isotope('.cases', {
        itemSelector: '.case-item',//元素选择器
        // layoutMode: 'fitRows',//类似表格布局，每行尽量填满。
        layoutMode: 'masonry',//瀑布流布局，允许不同高度的项目错落排列。
        transitionDuration: '0.5s',// 过渡时间
        percentPosition: true,//显示百分比
        // 瀑布流布局
        masonry: {
            columnWidth: '.case-item',
        },
    });// 实现点击按钮切换并筛选
    const filterBtns = document.querySelector('.filter-btns');
    //给filterBtns里的所有按钮添加点击事件，改变当前选中的按钮样式
    filterBtns.addEventListener('click', (e) => {
        // console.log(e.target)
        if (e.target.classList.contains('filter-btn')) {
            filterBtns.querySelector('.active').classList.remove('active');
            e.target.classList.add('active');
            const filterValue = e.target.getAttribute('data-filter');
            isotope.arrange({ filter: filterValue });
            // console.log(filterValue)
        }
    })

    // 修改初始化函数
    function init() {
        renderData();
        initNav();
        initScrollSync();
        initSearchScrollSync(); // 新增搜索页面滚动监听

        // 新增搜索事件监听
        $('#searchInp').on('keyup', function (e) {
            clearTimeout(searchTimer);
            if (e.key === 'Enter') {
                // 执行搜索
                performSearch(this.value.trim());
                // 如果屏幕不大于768px
                if (window.innerWidth <= 768) {
                    // 成功显示对应内容后，移除 container header-container 上的open类
                    $('.header-container').removeClass('open');
                }
            } else {
                searchTimer = setTimeout(() => {
                    performSearch(this.value.trim());
                    // 如果屏幕不大于768px
                    if (window.innerWidth <= 768) {
                        // 成功显示对应内容后，移除 container header-container 上的open类
                        $('.header-container').removeClass('open');
                    }
                }, 1500);
            }
        });

        $('main section').each(function () {
            const sectionId = $(this).attr('id');
            const lastLiId = localStorage.getItem(`lastLi_${sectionId}`);
            if (lastLiId) {
                $(`.left-container[section-id="${sectionId}"] li[data-target="${lastLiId}"]`)
                    .addClass('active');
            }
        });
        initScrollSync();

        // 修改初始化滚动逻辑
        setTimeout(() => {
            restoreLeftMenu();
            scrollToSavedPosition(); // 新增立即执行滚动定位
        }, 300);

    }

    // 优化滚动定位函数
    function scrollToSavedPosition() {
        const currentSection = $('section.displayBlock').attr('id');
        const lastLiId = localStorage.getItem(`lastLi_${currentSection}`);
        if (lastLiId) {
            const targetElement = document.getElementById(lastLiId);
            if (targetElement) {
                const $scrollContainer = $(targetElement).closest('.right-container').find('.tiaoWen');
                // 使用原生offsetTop获取更精确的位置
                const container = $scrollContainer[0];
                const scrollPosition = targetElement.offsetTop - container.offsetTop;

                container.scrollTo({
                    top: scrollPosition,
                    behavior: 'auto' // 改为立即滚动
                });
            }
        }
    }

    // 执行初始化
    init();

    // 新增滚动到保存位置的独立函数
    function scrollToSavedPosition() {
        const currentSection = $('section.displayBlock').attr('id');
        const lastLiId = localStorage.getItem(`lastLi_${currentSection}`);
        if (lastLiId) {
            const targetElement = document.getElementById(lastLiId);
            if (targetElement) {
                const $scrollContainer = $(targetElement).closest('.right-container').find('.tiaoWen');
                // 改进后的定位计算逻辑
                const containerOffset = $scrollContainer.offset().top;
                const elementPosition = targetElement.getBoundingClientRect().top;
                const scrollPosition = elementPosition + $scrollContainer.scrollTop() - containerOffset;

                $scrollContainer.stop().animate({
                    scrollTop: scrollPosition
                }, 100);
            }
        }
    }

    // 新增：左侧目录显示/隐藏控制
    $(document).on('click', '.display-hide-left-container', function () {
        // 判断nav中子元素那个是有 active的,获取这个元素的data-section的值
        const activeSection = $('nav .active').data('section');
        console.log(activeSection)
        if (activeSection === 'shangHan' || activeSection === 'jinGui') {
            // 如果当前是shangHan或jinGui
            //
            const $container = $(this).find('.display-hide-left-container-box');
            const isActive = $container.hasClass('active');

            // 切换按钮状态
            $container.toggleClass('active');

            // 切换图标显示状态
            $container.find('.fa-angle-right').toggleClass('display', !isActive);
            $container.find('.fa-angle-left').toggleClass('display', isActive);

            // 切换左侧容器显示状态
            $('.left-container').toggleClass('active');
        } else if (activeSection === 'search') {
            // 处理搜索页面的逻辑
            console.log('search')
            // 如果当前是shangHan或jinGui
            const $container = $(this).find('.display-hide-left-container-box');
            const isActive = $container.hasClass('active');
            // 切换按钮状态
            $container.toggleClass('active');
            // 切换图标显示状态
            $container.find('.fa-angle-right').toggleClass('display', !isActive);
            $container.find('.fa-angle-left').toggleClass('display', isActive);
            $('.search-left-container').toggleClass('active');

        }


    });
    //让.display-hide-left-container 在main内部随意拖动
    // 初始化位置
    try {
        const savedPos = JSON.parse(localStorage.getItem('leftContainerPosition'));
        if (savedPos) {
            // 判断是否在屏幕内,如果不在屏幕内,则设置为默认位置
            var containerWidth = $('.display-hide-left-container').width();
            var windowWidth = $(window).width();

            // 新增边界检查逻辑：
            // 1. 左边不能超出屏幕左边界
            // 2. 右边不能超出屏幕右边界
            // 3. 顶部不能超出屏幕顶部
            // 4. 底部不能超出屏幕底部
            if (savedPos.left < 0 ||
                savedPos.left > windowWidth - containerWidth ||
                savedPos.top < 0 ||
                savedPos.top > $(window).height() - $('.display-hide-left-container').height()) {

                // 设置到屏幕右下角
                $('.display-hide-left-container').css({
                    left: (windowWidth - containerWidth - 20) + 'px', // 留20px边距
                    top: '20px'
                });

                // 更新存储位置
                localStorage.setItem('leftContainerPosition', JSON.stringify({
                    left: windowWidth - containerWidth - 20,
                    top: 20
                }));
            } else {
                $('.display-hide-left-container').css({
                    left: savedPos.left + 'px',
                    top: savedPos.top + 'px'
                });
            }
        }
    } catch (e) {
        console.log('位置信息解析失败');
    }

    $('.display-hide-left-container').draggable({
        containment: 'main',
        scroll: false,
        stop: function (event, ui) {
            // 获取当前位置
            var left = ui.position.left;
            var top = ui.position.top;

            // 保存位置到localStorage
            localStorage.setItem('leftContainerPosition', JSON.stringify({ left, top }));
        }
    })

});

